<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园惊魂 - 剧情编辑器</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
</head>
<body>
    <div id="editor-container">
        <!-- 顶部菜单栏 -->
        <div id="menu-bar">
            <div class="menu-item">
                <span>文件</span>
                <div class="submenu">
                    <button id="new-project">新建项目</button>
                    <button id="open-project">打开项目</button>
                    <button id="save-project">保存项目</button>
                    <button id="export-project">导出剧情</button>
                </div>
            </div>
            <div class="menu-item">
                <span>编辑</span>
                <div class="submenu">
                    <button id="undo-action">撤销</button>
                    <button id="redo-action">重做</button>
                    <button id="delete-node">删除节点</button>
                </div>
            </div>
            <div class="menu-item">
                <span>初始化设置</span>
                <div class="submenu">
                    <button id="set-character">角色设置</button>
                    <button id="set-scene">场景设置</button>
                    <button id="set-variable">变量设置</button>
                </div>
            </div>
            <div class="menu-item">
                <span>剧情设置</span>
                <div class="submenu">
                    <button id="add-dialogue">添加对话</button>
                    <button id="add-choice">添加选项</button>
                    <button id="add-event">添加事件</button>
                </div>
            </div>
            <div class="menu-item">
                <span>帮助</span>
                <div class="submenu">
                    <button id="show-help">使用帮助</button>
                    <button id="about-editor">关于编辑器</button>
                </div>
            </div>
        </div>

        <!-- 主编辑区域 -->
        <div id="main-area">
            <!-- 左侧边栏 -->
            <div id="sidebar">
                <div class="sidebar-section">
                    <h3>项目结构</h3>
                    <div id="project-tree">
                        <div class="tree-item" data-type="scene">场景</div>
                        <div class="tree-item" data-type="character">角色</div>
                        <div class="tree-item" data-type="dialogue">对话</div>
                        <div class="tree-item" data-type="event">事件</div>
                    </div>
                </div>
                <div class="sidebar-section">
                    <h3>组件库</h3>
                    <div id="component-library">
                        <div class="component-item" data-type="start-node">开始节点</div>
                        <div class="component-item" data-type="dialogue-node">对话节点</div>
                        <div class="component-item" data-type="choice-node">选项节点</div>
                        <div class="component-item" data-type="event-node">事件节点</div>
                        <div class="component-item" data-type="end-node">结束节点</div>
                    </div>
                </div>
            </div>

            <!-- 中央编辑区域 -->
            <div id="editor-canvas-container">
                <div class="canvas-controls">
                    <button id="zoom-in">+</button>
                    <button id="zoom-out">-</button>
                    <button id="reset-view">重置视图</button>
                </div>
                <div id="editor-canvas-wrapper">
                    <svg id="editor-canvas" width="1000" height="800"></svg>
                </div>
            </div>

            <!-- 右侧属性面板 -->
            <div id="properties-panel">
                <h3>属性编辑</h3>
                <div id="node-properties" class="hidden">
                    <div class="property-group">
                        <label for="node-name">节点名称:</label>
                        <input type="text" id="node-name">
                    </div>
                    <div class="property-group" id="dialogue-properties" class="hidden">
                        <label for="dialogue-character">角色:</label>
                        <select id="dialogue-character"></select>
                        <label for="dialogue-text">对话内容:</label>
                        <textarea id="dialogue-text"></textarea>
                    </div>
                    <div class="property-group" id="choice-properties" class="hidden">
                        <div id="choices-list"></div>
                        <button id="add-choice-option">添加选项</button>
                    </div>
                    <div class="property-group" id="event-properties" class="hidden">
                        <label for="event-type">事件类型:</label>
                        <select id="event-type">
                            <option value="item">获得物品</option>
                            <option value="variable">设置变量</option>
                            <option value="scene">切换场景</option>
                            <option value="branch">剧情分支</option>
                        </select>
                        <div id="event-details"></div>
                    </div>
                    <button id="save-node-properties">保存</button>
                </div>
                <div id="no-selection" class="properties-placeholder">
                    <p>请选择一个节点进行编辑</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态窗口 -->
    <div id="modal" class="modal hidden">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <div id="modal-body"></div>
        </div>
    </div>

    <!-- 右键菜单 -->
    <div id="context-menu" class="context-menu hidden">
        <ul>
            <li id="context-connect">连接节点</li>
            <li id="context-delete">删除节点</li>
            <li id="context-properties">节点属性</li>
        </ul>
    </div>

    <script src="main.js"></script>
</body>
</html>